import React, { useEffect, useMemo, useRef, useState } from 'react';
import _ from 'lodash';
import { map } from 'rxjs/operators';

import preClassName from '../../../utils/preClassName';
import { resize } from '../../../common/eventHandle';
import useChartOption from './hooks/useChartOption';
import { getLegendRect, getLegendH } from './util';

import Title from './Title';
import Legend from './Legend';
import Echart from '../Echart';

import { RSEChartProps } from './interface';

import './style.sass';

const TITLE_BOTTOM = 10;
const LEGEND_BOTTOM = 10;

export default (props: RSEChartProps) => {
  const container = useRef<HTMLDivElement>(null);
  const [rect, setRect] = useState<{
    chartStyle: React.CSSProperties;
    titleStyle: React.CSSProperties;
    legendStyle: React.CSSProperties;
  }>({ chartStyle: {}, titleStyle: {}, legendStyle: {} });

  const titleRef = useRef(null);
  const legendRef = useRef(null);

  const { title, legend, option } = useChartOption(props.option);

  useEffect(() => {
    const getRectInfo = (ref: React.RefObject<HTMLElement>) => {
      const ele = ref.current as HTMLElement;
      const { width, height } = (ele as HTMLElement).getBoundingClientRect();
      return { width, height: height };
    };

    const boxEle = container.current as HTMLElement;
    const eleResize = resize(boxEle)
      .pipe(
        map((boxEle) => {
          const { width, height } = (boxEle as HTMLElement).getBoundingClientRect();
          const titleRectInfo = _.get(title, 'show', false) ? getRectInfo(titleRef) : { height: 0 };
          const titleH = _.get(title, 'show', false) ? titleRectInfo.height + TITLE_BOTTOM : 0;
          const legendRectInfo = getLegendRect(legendRef)(legend, titleH);
          // _.get(legend, 'show', false) ? getRectInfo(legendRef) : { width: 0, height: 0 };

          const legendH = getLegendH(legend, legendRectInfo);
          const legendPosition = _.get(legend, 'position', 'top');

          const chartStyle: React.CSSProperties = {
            position: 'absolute',
            top: legendPosition === 'top' ? titleH + legendH : titleH,
            height: height - titleH - legendH,
            width: width,
          };

          const titleStyle = {
            position: 'absolute',
            top: 0,
            // height: titleRectInfo.height,
            width: width,
          };

          const legendStyle = {
            position: 'absolute',
            ...(legendPosition !== 'bottom' ? { top: titleH } : {}),
            // height: legendRectInfo.height,
            width: width,
          };

          return {
            chartStyle,
            titleStyle,
            legendStyle,
          };
        }),
      )
      .subscribe((res) => {
        setRect(res);
      });
    return () => {
      eleResize.unsubscribe();
    };
  }, [title, legend]);

  return (
    <div className={preClassName('chart')} ref={container} style={{ position: 'relative' }}>
      <Title ref={titleRef} title={title} style={rect.titleStyle} />
      <Legend ref={legendRef} legend={legend} style={rect.legendStyle} />
      <div style={rect.chartStyle}>
        <Echart option={option} width={rect.chartStyle.width} height={rect.chartStyle.height} />
      </div>
      {/* xAxis */}
      {/* yAxis */}
    </div>
  );
};
